<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、实例和组件定义data的区别</h2>
  <div>html中，vue实例的时候定义data属性既可以是一个对象，也可以是一个函数</div>
  <br>
  <div>组件中定义data属性，只能是一个函数,如果为组件data直接定义为一个对象,则会得到警告信息</div>
  <h2>二、组件data定义函数与对象的区别</h2>
  <div>在我们定义好一个组件的时候，vue最终都会通过Vue.extend()构成组件实例</div>
  <br>
  <div>如果是对象，多个组件会共用了同一个内存地址，一个改会影响到其他组件，如果我们采用函数的形式，则不会出现这种情况（函数返回的对象内存地址并不相同）</div>
  <h2>三、原理分析</h2>
  <div>在源码中vue初始化data的代码，data的定义可以是函数也可以是对象,组件在创建的时候，会进行选项的合并,进入if判断，若data类型不是function，则出现警告提示</div>
  <h2>四、总结</h2>
  <ul>
    <li>根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况</li>
    <li>组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象</li>
  </ul>
  <div>初始化组件时会调用data函数，返回一个对象，每个对象会分到不同的内存地址，互不影响，提高组件的复用性</div>
</body>
</html>